@use "./reset";
@use "./element-plus";

.app-container {
  padding: 15px;
}

// 进度条颜色
#nprogress .bar {
  background-color: var(--el-color-primary);
}

// 全局搜索区域样式
.search-container {
  padding: 18px 16px 0;
  margin-bottom: 16px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;

  .search-buttons {
    margin-right: 0;
  }

  .el-form-item {
    margin-bottom: 18px;
  }
}

// 顶部栏工具栏区域
.tool-bar-container {
  padding: 18px 16px 16px;
  margin-bottom: 16px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;

  .current-area-text {
    margin-right: 16px;
    font-size: 14px;
    color: var(--el-text-color-regular);
  }
}

// 表格区域样式
.data-table {
  // margin-bottom: 16px;

  // 表格工具栏区域
  &__toolbar {
    display: flex;
    justify-content: space-between;
    // margin-bottom: 16px;

    &--actions,
    &--tools {
      display: flex;
      gap: 8px;
    }
  }

  // 表格内容区域
  &__content {
    margin: 8px 0;
  }

  // 分页区域
  .el-pagination {
    justify-content: flex-end;
    // margin-top: 16px;
  }
}

// 登录页面全局样式
.login-container {
  background: var(--login-bg-color);

  // 登录卡片样式
  .login-card {
    background: var(--login-card-bg);
    box-shadow: var(--login-card-shadow);
    border: 1px solid var(--login-border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
  }

  // 登录表单样式
  .login-form {
    .el-form-item {
      margin-bottom: 20px;
    }

    .el-input {
      .el-input__wrapper {
        background: var(--login-input-bg);
        border: 1px solid var(--login-input-border);
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          border-color: var(--login-primary-light);
        }

        &.is-focus {
          border-color: var(--login-input-focus-border);
          box-shadow: 0 0 0 2px rgba(0, 124, 198, 0.1);
        }
      }

      .el-input__inner {
        color: var(--login-text-primary);
        font-size: 14px;

        &::placeholder {
          color: var(--login-text-secondary);
        }
      }
    }

    .el-button--primary {
      background: var(--login-primary-gradient);
      border: none;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:hover {
        background: var(--login-button-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 124, 198, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .el-checkbox {
      .el-checkbox__input {
        .el-checkbox__inner {
          border-color: var(--login-input-border);

          &:hover {
            border-color: var(--login-primary-light);
          }
        }

        &.is-checked {
          .el-checkbox__inner {
            background-color: var(--login-primary-color);
            border-color: var(--login-primary-color);
          }
        }
      }

      .el-checkbox__label {
        color: var(--login-text-secondary);
      }
    }

    .el-link {
      color: var(--login-link-color);

      &:hover {
        color: var(--login-link-hover);
      }
    }
  }

  // 登录页面标题样式
  .login-title {
    color: var(--login-text-primary);
    font-weight: 600;
    margin-bottom: 8px;
  }

  // 登录页面副标题样式
  .login-subtitle {
    color: var(--login-text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
  }

  // 登录页面图标样式
  .login-icon {
    color: var(--login-primary-color);
  }
}
